<!DOCTYPE html>
<html lang='en'>

<head>
	<meta charset='utf-8' />
	<title>绑定样式</title>
	<!-- <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script> -->
	<script src='../js/vue.js'></script>
	<style>
		.basic {
			font-size: 23px;
			color: #88d82d;
		}

		.green {
			font-size: 50px;
			color: green;
		}

		.blue {
			font-size: 100px;
			color: blue;
		}
	</style>
</head>

<body>
	<!-- 绑定class 样式  样式不确定 -->
	<div id='app' :class="classstytle">{{msg}}
		<button @click="change('basic')">basic</button>
		<button @click="change('green')">green</button>
		<button @click="change('blue')">blue</button>

	</div>
	<script>
		var vue = new Vue({
			el: '#app',
			data: {
				msg: '绑定class样式',
				classstytle: ''
			}, methods: {
				change(value, event) {
					this.classstytle = value;
				}
			}
		});
	</script>
</body>

</html>